<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>canvas太极图</title>
	<style>
		canvas{
			border:1px solid red;
			background-color: skyblue;
		}
	</style>
</head>
<body>
	<canvas width="500" height="500" id="canvas"></canvas>

	<script>
		window.onload=function(){
			var myCanvas=document.getElementById("canvas");
			var cxt=myCanvas.getContext("2d");

			//背景
			cxt.beginPath();
			cxt.arc(0,0,100,0,2*Math.PI,false);
			cxt.stroke();
			cxt.closePath();
			//下黑
			cxt.beginPath();
			cxt.arc(300,300,100,0,Math.PI,false);
			cxt.fill();
			cxt.closePath();
			//上白
			cxt.beginPath();
			cxt.arc(300,300,100,0,Math.PI,true);
			cxt.fillStyle="white";
			cxt.fill();
			//上小黑
			cxt.beginPath();
			cxt.arc(350,300,25,0,2*Math.PI,true);
			cxt.lineWidth=50;
			cxt.strokeStyle="black";
			cxt.stroke();
			cxt.fillStyle="white";
			cxt.fill();
			//下小白
			cxt.beginPath();
			cxt.arc(250,300,25,0,2*Math.PI,true);
			cxt.lineWidth=50;
			cxt.strokeStyle="white";
			cxt.stroke();
			cxt.fillStyle="black";
			cxt.fill();
		}
	</script>
</body>
</html>